<template>
    <div class="container">
        <svg ref="bank" @mousedown="handleClick" @mouseup="handleMouseUp" @mousemove="handleMouseMove" @wheel="handleWheel">
            <g ref="main" width="100%" height="100%">
                <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
            </g>
        </svg>
        
    </div>
</template>
<script setup lang="js" name="index">
    import {ref , onMounted} from 'vue'

    const main = ref(null)
    const bank = ref(null)

    const isDragging = ref(false)
    const canScaling = ref(false)

    const oldPosition = ref({x:0, y:0})

    const handleWheel = (event) => {
        console.log(bank.value)
        if(canScaling.value === false) return;
        event.preventDefault();
        const scaleAmount = event.deltaY * -0.00005;
        const mainEl = bank.value;
        let currentScale = mainEl.getAttribute('data-scale') || 1;
        currentScale = parseFloat(currentScale) + scaleAmount;
        currentScale = Math.min(Math.max(0.1, currentScale), 5); // Limit scale between 0.1 and 5
        mainEl.setAttribute('data-scale', currentScale);
        
        // mainEl.setAttribute('transform', `scale(${currentScale}) translate(-4096px, -2048px)`);
        mainEl.style.transform = `scale(${currentScale}) translate(-4096px, -2048px)`;
        mainEl.style.transformOrigin = `0 0`;
        // console.log(mainEl.style.transformOrigin);
        // console.log(currentScale);
        console.log(offsetX, offsetY)
        // console.log(getComputedStyle(mainEl).style.transform);
    }

    const handleMouseMove = (event) => {
        if (isDragging.value) {
            // console.log('SVG mouse move!', event);
            const offsetX = event.clientX - oldPosition.value.x;
            const offsetY = event.clientY - oldPosition.value.y;
            // console.log(offsetX, offsetY);
            const mainEl = bank.value;
            const currentLeft = parseFloat(getComputedStyle(mainEl).left) || 0;
            const currentTop = parseFloat(getComputedStyle(mainEl).top) || 0;
            mainEl.style.left = `${offsetX + currentLeft}px`;
            mainEl.style.top = `${offsetY + currentTop}px`;
            mainEl.style.cursor = 'grabbing';
            // mainEl.setAttribute('transform', `translate(${offsetX}, ${offsetY})`);
            oldPosition.value.x = event.clientX
            oldPosition.value.y = event.clientY
            
        }else{
            oldPosition.value.x = event.clientX
            oldPosition.value.y = event.clientY
            // console.log(oldPosition.value);
            bank.value.style.cursor = 'inherit';
        }
        canScaling.value = true
    }

    const handleMouseUp = (event) => {
        isDragging.value = false
        // console.log('SVG mouse up!', event);
        bank.value.style.cursor = 'inherit';
    }
    const handleClick = (event) => {
        isDragging.value = true
        bank.value.style.cursor = 'inherit';
        // console.log('SVG clicked!', event);
    }
    onMounted(() => {
        const mainEl = bank.value;
        mainEl.setAttribute('transform', `scale(1) translate(-4096px, -2048px)`);
    })
</script>
<style scoped>
    .container {
        margin-top: 44px;
        overflow: hidden;
        height: calc(100vh - 88px);
        position: relative;
        svg{
            width: 8192px;
            height: 4096px;
            position: absolute;
            transform: scale(1) translate(-4096px, -2048px);
            background-color: rgba(0, 0, 0, 0.5);
            top: 0px;
            left: 0px;
        }
    }
</style>